<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script>
    //定义全局组件
 /*   Vue.component("counter",{
        template:"<button @click='count++'>点我试试，我记住你了！点了我{{count}}次！</button>",
        data(){
            return{
                count: 0,
            }
        }
    });*/
    //局部组件
    const counter = {
        template:"<button @click='count++'>点我试试，我记住你了！点了我{{count}}次！</button>",
        data(){
            return{
                count: 0,
            }
        }
    };

    const app = new Vue({
        el:"#app", //element,vue作用的标签
        data:{
        },
        components:{
            counter //ES6中，一个对象的key和value完全一致，可以简写为key counter: counter
        }
    });
</script>
</body>
</html>